<template>
  <div class="product-list-container">
    <div class="buttons">
      <SwitchButton
        v-for="(item, i) in buttons"
        :key="i"
        :title="item"
        :active="i === 0"
      />
    </div>
    <div class="list">
      <a :href="item.link" class="list-item" v-for="(item, i) in list" :key="i">
        <div class="title">{{ item.title }}</div>
        <div class="date">
          {{ item.date }}
          <i class="el-icon-arrow-right"></i>
        </div>
      </a>
    </div>
    <div class="pager">
      <el-pagination
        background
        layout="sizes, prev, pager, next, jumper"
        :total="110"
        :page-size="10"
        :page-sizes="[5, 10, 20, 50]"
        :pager-count="5"
      />
    </div>
  </div>
</template>

<script>
import SwitchButton from "./SwitchButton.vue";
// import customPagination from "../customPagination";
export default {
  components: {
    SwitchButton,
  },
  data() {
    return {
      buttons: ["上云产品", "解决方案", "经典案例", "服务提供商"],
      list: [
        {
          title: "PDM产品管理系统",
          date: "2021-10-28",
          link: "#/product/detail",
        },
        {
          title: "中国电信天翼云会议",
          date: "2021-09-09",
          link: "#/product",
        },
        {
          title: "产线仿真建模",
          date: "2021-08-10",
          link: "#/product",
        },
        {
          title: "工业互联网标识解析应用服务平台",
          date: "2021-04-21",
          link: "#/product",
        },
        {
          title: "标识解析应用系统",
          date: "2021-04-21",
          link: "#/product",
        },
        {
          title: "科泰智能云·道路运输车辆卫星定位系统",
          date: "2021-04-20",
          link: "#/product",
        },
        {
          title: "浪潮云会计（企业版）",
          date: "2021-04-20",
          link: "#/product",
        },
        {
          title: "成都市检验检测认证公共信息服务平台",
          date: "2021-04-15",
          link: "#/product",
        },
        {
          title: "融资租赁",
          date: "2021-04-15",
          link: "#/product",
        },
        {
          title: "电梯智能监控云服务",
          date: "2021-04-15",
          link: "#/product",
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.product-list-container {
  width: 57vw;
  //   margin-top: 20px;
  padding: 10px 20px 0 20px;
  background: white;
  height: fit-content;
  a {
    text-decoration: none;
    color: inherit;
  }
  .buttons {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #eeeded;
  }
  .list {
    margin-bottom: 40px;
    .list-item {
      margin-top: 30px;
      display: flex;
      justify-content: space-between;
      .title {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 0 1 auto;
      }
      .date {
        color: #575757;
        flex: 0 0 auto;
      }
    }
  }
  .pager {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 30px;
  }
}
</style>
